<template>
	<view >
		<view class="search">
			<view class="query">
				<image class="img" src="../../static/img/search.png"></image>
				<input placeholder="您遇到的问题"></input >
		    </view>
			<text class="text" @click="change()">搜索</text>
		</view>
		<view>
			
			<view class="helpContent">
			<text class="text">常见问题</text>
			<view class="hr"></view>
			</view>
			
			<view v-for="(item,index) in list" class="helpContent">
				<uni-collapse accordion="true">
				    <uni-collapse-item class="text2" :title=item.title >
				        <view class="text3" style="padding: 30rpx;" v-html="item.content">
				        
				        </view>
				    </uni-collapse-item>
				</uni-collapse>
				
				
			<!-- <text class="text2">{{item.title}}</text>
			<view class="text3" ></view>
			<view class="hr"></view> -->
			</view>
			
		</view>
	
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	export default {
		 components: {uniCollapse,uniCollapseItem},
		data() {
			return {
				list: [],
				current: 0,
			}
		},
		onLoad() {
			this.$api.getHelp().then(res => {
				this.list=res.data;
				console.log(res.data)
			})
		},
		
		methods: {
			change(index) {
			},
		}
	}
</script>

<style lang="scss">
	.search{
		height: 62rpx;
		width: 750rpx;
		background-color: #36BCC6;
		display: flex;
		padding: 10rpx;
		.query{
			display: flex;
			height: 47rpx;
			width: 564rpx;
			border: 1px solid #FFFFFF;
			border-radius: 2em;
			margin-left: auto;
			margin-right: auto;
		}
		.img{
			height: 30rpx;
			width: 30rpx;
			z-index:100;
			padding: 8rpx;
		}
		.text{
			margin-right: 20rpx;
			font-size: 35rpx;
		}
	}
	.uni-input-placeholder{
		color:#E4E4E4
	}
	.helpContent{
		margin-top: 30rpx;
		.text{
			font-size: 35rpx;
			color:#1D1D1D;
			margin-left:25rpx;
			font-weight:800;
		}
		.text2{
			font-size: 28rpx;
			color:#1D1D1D;	
			font-weight:600;
		}
		.text3{
			font-size: 20rpx;
			color:#1D1D1D;
			font-weight:500;
		}
		.hr{
			margin-top: 10rpx;
			height: 1px;
			width: 800rpx;
			border: 1px solid #E5E5E5;
		}
	}
	
</style>
